<template>
	<!-- {{ cpnOptions }}
	<br />>
	{{ cpnMap }} -->
	<a-form-item
		v-for="key in Object.keys(cpnOptions)"
		:label="cpnMap[key].label"
		:key="key">
		<a-input v-if="cpnMap[key].cpn === 'input'" v-model:value="cpnOptions[key]"></a-input>
		<a-row v-else-if="cpnMap[key].cpn === 'colorPicks'" :gutter="10">
			<template v-if="key === 'color'">
				<a-col class="color-wrapper">
					<span>{{ cpnMap[key]["subLabel"][0] }}</span>
					<ColorPicker
						:hex="['border', 'decorate'].includes(type)"
						v-model:model-value="cpnOptions[key][0]"></ColorPicker>
				</a-col>
				<a-col class="color-wrapper">
					<span>{{ cpnMap[key]["subLabel"][1] }}</span>
					<ColorPicker
						:hex="['border', 'decorate'].includes(type)"
						v-model:model-value="cpnOptions[key][1]"></ColorPicker>
				</a-col>
			</template>
		</a-row>
		<a-switch v-else-if="cpnMap[key].cpn === 'switch'" v-model:checked="cpnOptions[key]"></a-switch>
		<a-row v-else-if="cpnMap[key].cpn === 'colorGroupPick'" :gutter="10">
			<a-col class="color-wrapper">
				<template v-if="key === 'xy'">
					<span>x</span>
					<a-input-number
						id="inputNumber"
						v-model:value="cpnOptions[key]['x']"
						:min="0"
						:max="5000" />
				</template>
				<template v-else-if="key === 'wh'">
					<span>宽</span>
					<a-input-number
						id="inputNumber"
						v-model:value="cpnOptions[key]['w']"
						:min="0"
						:max="5000" />
				</template>
			</a-col>
			<a-col class="color-wrapper">
				<template v-if="key === 'xy'">
					<span>y</span>
					<a-input-number
						id="inputNumber"
						v-model:value="cpnOptions[key]['y']"
						:min="0"
						:max="5000" />
				</template>
				<template v-else-if="key === 'wh'">
					<span>高</span>
					<a-input-number
						id="inputNumber"
						v-model:value="cpnOptions[key]['h']"
						:min="0"
						:max="5000" />
				</template>
			</a-col>
		</a-row>
		<a-input-number
			v-else-if="cpnMap[key].cpn === 'inputNumber'"
			v-model:value="cpnOptions[key]" />
		<ColorPicker
			v-else-if="cpnMap[key].cpn === 'colorPick'"
			:hex="['border', 'decorate'].includes(type)"
			v-model:model-value="cpnOptions[key]"></ColorPicker>
	</a-form-item>
</template>
<script setup>
import ColorPicker from "@/components/ColorPicker/ColorPicker.vue";
import { useVModelHook } from "@/hooks/useVModelHook.js";
const props = defineProps({
	type: {
		type: String,
		default: "",
	},
	modelValue: {
		type: Object,
		default: () => {},
	},
	mapValue: {
		type: Object,
		default: () => {},
	},
});
const emit = defineEmits(["update:modelValue", "update:mapValue"]);
// 属性 | 样式
const cpnOptions = useVModelHook(props, emit);
// 属性 | 样式 的组件映射
const cpnMap = useVModelHook(props, emit, "update:mapValue", "mapValue");
</script>
<style scoped lang="scss">
.color-wrapper {
	display: flex;
	align-items: center;
	span {
		margin-right: 5px;
	}
}
</style>
